<template>
	<view class="box">
		<!-- 取消订单 -->
		<u-navbar title="完成订单界面" placeholder>
		</u-navbar>

		<!-- 地图 -->
		<view class="mapbox">
			<map id="navMap" class="map" enable-traffic="true" enable-scroll="true" show-location='true'
				:polyline="polyline" :markers="initialPoint"></map>
		</view>
		<!-- 信息 -->
		<view class="Information">
			<view class="userBox">
				<image src="../../static/用户.png" mode=""></image>
				<span>{{ tel | telHide }}</span>
			</view>
			<view>
				<!-- 订单信息 -->
				<view class="Information_1">
					<div class='round'></div>
					<!-- 用户出发地 -->
					<text class="text">{{orderInfo.departure}}</text>
				</view>
				<view class="Information_2">
					<div class='round2'></div>
					<!-- 用户目的地 -->
					<text class="text">{{orderInfo.destination}}</text>
				</view>
			</view>
			<!-- 电话联系 -->
			<view class="phone_user">
				<u-icon name="phone-fill" color="#464749" size="35" @click="payTel(tel)"></u-icon>
			</view>
		</view>
		<!-- 底部到达目的地 -->
		<view class="but">
			<!-- 司机到达 -->
			<button @tap="finishAddress">确定</button>
		</view>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				navMap: '', // 初始实例化地图对象
				points: [], // 缩放视野---记录起点和终点
				initialPoint: [],
				polyline: [], //路线的规划
				tel: '', //乘客电话
			}
		},
		onLoad(option) {
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})
			// 实例化地图对象
			this.navMap = uni.createMapContext("navMap", this)

			console.log(this.orderInfo, '订单信息')
		},
		onShow() {
			// 电话
			this.tel = this.orderInfo.userPhone.toString()

			// 缩放视野---记录起点和终点
			this.points = JSON.parse(this.orderInfo['route'])
			console.log(this.points, '----------')
			this.initialPoint[0] = {
				id: 0,
				longitude: this.points[0].longitude,
				latitude: this.points[0].latitude,
				iconPath: "/static/起点.png",
				width: 40,
				height: 40
			}

			this.initialPoint[1] = {
				id: 1,
				longitude: this.points[1].longitude,
				latitude: this.points[1].latitude,
				iconPath: "/static/终点.png",
				width: 40,
				height: 40
			}
			console.log(this.initialPoint, '+++++++++++')


			// 缩放地图
			this.navMap.includePoints({
				padding: [100],
				points: this.points
			})
			// 绘制路线
			this.amapPlugin.getDrivingRoute(this.getDataObj())
		},
		computed: {
			...mapState('driverInfo', ['orderInfo'])
		},
		methods: {
			// 绘制路线
			getDataObj() {
				let that = this
				let color = '#00aaff'
				return {
					// 起点
					origin: that.points[0].longitude + ',' + that.points[0].latitude,
					// 终点
					destination: that.points[1].longitude + ',' + that.points[1].latitude,
					success: data => {
						console.log(data, '驾车的路线')

						// 驾车的路线
						let points = []
						if (!data || !data.paths || !data.paths[0] || !data.paths[0].steps) {
							uni.$showMsg('查询失败')
							return
						}
						let steps = data.paths[0].steps
						steps.forEach(item => {
							let polylines = item.polyline.split(';')
							polylines.forEach(item1 => {
								let locations = item1.split(',')
								points.push({
									longitude: locations[0],
									latitude: locations[1]
								})
							})
						})
						// 路线的规划
						that.polyline = [{
							points,
							color,
							width: 3
						}]
					},
					fail(err) {
						console.log('报错了', err)
					}
				}
			},
			// 完成订单
			async finishAddress() {
				// 跳转到接单中心
				uni.navigateTo({
					url: '/pages/FlashGet/FlashGet'
				})
			},
			// 拨打电话
			payTel(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			}
		},
	}
</script>

<style lang="scss">
	.box {
		height: 100%;
		width: 750rpx;

	}

	.headBox {
		width: 100%;
		height: 140rpx;
		display: flex;
	}

	.headBox>view:nth-child(1) {
		width: 75%;
		height: 160rpx;
		border: 1px solid #F6F6F6;
	}

	.headBox>view:nth-child(2) {
		width: 25%;
		height: 160rpx;
		border: 1px solid #F6F6F6;
		text-align: center;
	}

	.headBox_first {
		width: 50%;
		margin: 0 auto;
	}

	.headBox>view>h2 {
		padding-left: 7%;
		font-size: 20px;
		margin-top: 5%;
	}

	.userorigin {
		color: orange;
		font-size: 20px;
	}

	.goto {
		color: black;
		margin-right: 5px;
	}

	.span_first {
		padding-left: 20px;
		color: silver;
		margin-top: 5px;
	}

	.headBox_com {
		width: 100%;
		height: 100rpx;
		border: 1px solid #F6F6F6;
	}

	.headBox_com span {
		padding-left: 7%;
		line-height: 50px;
	}

	.mapbox {
		width: 100%;
		height: 600rpx;
		position: relative;
	}

	.Information {
		width: 100%;
		height: 300rpx;
		display: flex;
		margin-bottom: 5px;
	}

	.but {
		width: 100%;
	}

	.but>button {
		background-color: orange;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
	}

	.Information img {
		height: 40px;
		width: 40px;
		border-radius: 25px;
	}

	.Information>view:nth-child(1) {
		width: 40%;
		text-align: center;
		position: relative;
	}

	.Information>view:nth-child(2) {
		width: 40%;
		position: relative;
		margin-top: 3%;
	}

	.Information>view>span {
		color: silver;
	}

	.Information>view:nth-child(3),
	.Information>view:nth-child(4) {
		width: 12%;
		position: relative;
		display: flex;
	}

	.icon {
		margin-left: 20px;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.round {
		height: 8px;
		width: 8px;
		background-color: green;
		border-radius: 25px;
		margin-top: 5px;
	}

	.round2 {
		height: 8px;
		width: 8px;
		background-color: orange;
		border-radius: 25px;
		margin-top: 5px;
	}

	.text {
		margin-left: 5px;
	}

	.Information_1 {
		display: flex;
	}

	.Information_1 text,
	.Information_2 text {
		font-size: 14px;
	}

	.Information_2 {
		display: flex;
		margin-top: 5px;
	}

	// 雨水
	#effect {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
	}

	.userBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 47%;
			height: 47%;
		}
	}

	.phone_user {
		width: 100%;
		margin-left: 40rpx;
	}
</style>
